// pages/cates/cates.ts
Page({
  data: {
    /* 动态类名 在这声明一下 方便后面保存使用 */
    classes: [] as string[],
    radio: "",

    /* 写一个动态样式（比较麻烦），只要这个对象styleObj发生变化，就要从新遍历和拼接，再重新赋值 */
    styleObj: {
      color: "red",
      "font-size": "40rpx",
    } as ICommon, // 写一个数组样式
    style: "", // 遍历拼接保存后赋值给style

    /* 双向数据绑定声明一下 */
    size: "",
  },
  onLoad() {
    this.innitStyle(); // 动态样式初始化渲染
  },
  // 因为动态添加样式需要，双向数据绑定也需要，所以用一个函数封装一下，哪里用就在那里调用这个函数
  innitStyle() {
    // 声明一个字符串用来拼接成上面data里面"color":"red",这个样式， 先遍历再用setData保存
    let str = "";
    for (const key in this.data.styleObj) {
      str += `${key}:${this.data.styleObj[key]};`;
    }
    this.setData({
      style: str, // p拼接好的str赋值给style
    });
  },

  /* 绑定事件 */
  goList(e: any) {
    // 取值就用dataset
    console.log("--", e.target.dataset);
  },
  goListTwo(e: any) {
    console.log("==", e.target.dataset);
  },
  /* 表单组件 */
  /* 多选是数组  可以选择多个*/
  checkboxEvent(e: IEvent) {
    // console.log(e);
    this.setData({
      classes: e.detail.value,
    });
  },
  /* 单选是字符串，因为只能选择一个 */
  radioEvent(e: IEvent) {
    this.setData({
      radio: e.detail.value,
    });
  },

  /* 双向数据绑定的方法 (修改styleObj里面的字体大小)*/
  setfontsize(e: IEvent) {
    const size = e.detail.value; // 表单的数据都在value中保存
    // console.log(size);
    // 先取出来这个对象，再把字体取出来，这样不影响别的数据如color
    const sobj = this.data.styleObj;
    sobj["font-size"] = `${size}rpx`;
    this.setData({
      styleObj: { ...sobj },
    });
    this.innitStyle();
  },
  getfontsize(e: IEvent) {
    console.log("---", e.detail.value);
  },
});
